<template>
  <div class="progress-bar" @click="onClick">
    <!-- 黑条 -->
    <div class="bar-inner">
      <!-- 黄条 -->
      <div class="progress" :style="progressStyle" ref="progress"></div>
      <!-- 点 -->
      <div class="progress-btn-wrapper" :style="btnStyle"
      @touchstart.prevent='onTouchStart'
      @touchmove.prevent='onTouchMove'
      @touchend.prevent='onTouchEnd'
      >
        <div class="progress-btn" ref="btn"></div>
      </div>
    </div>
  </div>
</template>
<script>
// 获取圆点按钮宽度

export default {
  name: 'ProgressBar',
  props: {
    progress: {
      type: Number,
      default: 0
    }
  },
  // 正在拖动进度条事件和进度条以拖动完
  emits: ['progressChanging', 'progressChanged'],
  data () {
    return {
      // 黄色进度条长度
      offset: 0,
      touch: {}
    }
  },
  watch: {
    progress (newProgress) {
      this.setOffset(newProgress)
    }
  },
  computed: {
    progressStyle () {
      return `width:${this.offset}px`
    },
    btnStyle () {
      return `transform:translateX(${this.offset}px)`
    }
  },
  methods: {
    onTouchStart (e) {
      this.touch.x1 = e.touches[0].pageX
      this.touch.beginWidth = this.$refs.progress.clientWidth
    },
    onTouchMove (e) {
      const progressBtnWidth = this.$refs.btn.clientWidth
      const delta = e.touches[0].pageX - this.touch.x1
      const tempWidth = this.touch.beginWidth + delta
      const barWidth = this.$el.clientWidth - progressBtnWidth
      const progress = Math.min(1, Math.max(tempWidth / barWidth, 0))
      this.offset = barWidth * progress
      this.$emit('progressChanging', progress)
    },
    onTouchEnd (e) {
      const progressBtnWidth = this.$refs.btn.clientWidth
      const barWidth = this.$el.clientWidth - progressBtnWidth
      const progress = this.$refs.progress.clientWidth / barWidth
      this.$emit('progressChanged', progress)
    },
    onClick (e) {
      // 获取到进度条的left、right、top、bottom
      const rect = this.$el.getBoundingClientRect()
      const offsetWidth = e.pageX - rect.left
      const progressBtnWidth = this.$refs.btn.clientWidth
      const barWidth = this.$el.clientWidth - progressBtnWidth
      const progress = offsetWidth / barWidth
      this.$emit('progressChanged', progress)
    },
    setOffset (newProgress) {
      const progressBtnWidth = this.$refs.btn.clientWidth
      const barWidth = this.$el.clientWidth - progressBtnWidth
      this.offset = barWidth * newProgress
    }
  }
}
</script>
<style lang="scss" scoped>
.progress-bar {
  height: 1.279318rem;
  .bar-inner {
    position: relative;
    top: .554371rem;
    height: .170576rem;
    background: rgba(0, 0, 0, 0.3);
    .progress {
      position: absolute;
      height: 100%;
      background: $color-theme;
    }
    .progress-btn-wrapper {
      position: absolute;
      left: -0.341151rem;
      top: -0.554371rem;
      width: 1.279318rem;
      height: 1.279318rem;
      .progress-btn {
        position: relative;
        top: .298507rem;
        left: .298507rem;
        box-sizing: border-box;
        width: .682303rem;
        height: .682303rem;
        border: .127932rem solid $color-text;
        border-radius: 50%;
        background: $color-theme;
      }
    }
  }
}
</style>
